What is victory-chart?
Victory-chart is a composable charting library for React. It provides a set of modular charting components that can be combined to create complex data visualizations. The library is built on top of D3.js and offers a variety of chart types, including bar charts, line charts, pie charts, and more.
What are victory-chart's main functionalities?
Line Chart
This code demonstrates how to create a simple line chart using Victory-chart. The VictoryLine component is used to render the line chart within a VictoryChart container.
import React from 'react';
import { VictoryChart, VictoryLine } from 'victory';
const data = [
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 }
];
const LineChart = () => (
<VictoryChart>
<VictoryLine data={data} />
</VictoryChart>
);
export default LineChart;
Bar Chart
This code demonstrates how to create a bar chart using Victory-chart. The VictoryBar component is used to render the bar chart within a VictoryChart container.
import React from 'react';
import { VictoryChart, VictoryBar } from 'victory';
const data = [
{ x: 'A', y: 2 },
{ x: 'B', y: 3 },
{ x: 'C', y: 5 },
{ x: 'D', y: 4 },
{ x: 'E', y: 7 }
];
const BarChart = () => (
<VictoryChart>
<VictoryBar data={data} />
</VictoryChart>
);
export default BarChart;
Pie Chart
This code demonstrates how to create a pie chart using Victory-chart. The VictoryPie component is used to render the pie chart.
import React from 'react';
import { VictoryPie } from 'victory';
const data = [
{ x: 'Cats', y: 35 },
{ x: 'Dogs', y: 40 },
{ x: 'Birds', y: 25 }
];
const PieChart = () => (
<VictoryPie data={data} />
);
export default PieChart;
Other packages similar to victory-chart
recharts
Recharts is a composable charting library built on React components. It is similar to Victory-chart in that it provides a variety of chart types and is easy to use with React. However, Recharts has a different API and offers some unique features like animations and tooltips out of the box.
nivo
Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers a wide range of chart types and is highly customizable. Compared to Victory-chart, Nivo provides more advanced features and customization options, but it may have a steeper learning curve.
react-chartjs-2
React-chartjs-2 is a React wrapper for Chart.js, a popular JavaScript charting library. It provides a simple way to integrate Chart.js charts into React applications. While it offers a wide range of chart types and customization options, it relies on Chart.js for rendering, which may not be as flexible as Victory-chart's approach.
[![Travis Status][trav_img]][trav_site]
VictoryChart
A flexible charting component for React. VictoryChart composes other victory components into reusable charts. Acting as a coordinator rather than a stand-alone component, VictoryChart reconciles props such as domain
and scale
for child components, and provides a set of sensible defaults.
VictoryChart includes:
API Documentation
Detailed documentation and interactive examples can be found at http://formidable.com/open-source/victory/docs/victory-chart
Requirements
Projects using Victory should also depend on [React][] and [prop-types][].
Issues
To make it easier to manage issues across all of Victory, we have disabled issues on this repo. Please open issues in the main victory repo instead. You can track our progress on issues here
Development
$ npm start
$ open http://localhost:3000
$ npm test
Multi-repo development
Victory uses lank
for multi-repo development. Use a lank workflow to test changes in victory dependencies. Here's an example of setting up lank to test changes in victory-core
from victory-chart
First, make sure that all of your Victory repos are siblings in the same directory
$ npm install -g lank
Victory repos are already configured with appropriate .lankrc
and lank scripts. To test changes in victory-core
from victory-chart
:
$ cd victory-chart
$ lank link
$ npm run lank-watch
$ npm run lank-run
Refresh your browser to pick up changes.
For more on the development environment, see DEVELOPMENT in the project builder archetype.
Contributing
Please review our Code of Conduct before contributing.
For a detailed contribution guide, please see CONTRIBUTING in the project builder archetype.
Caveats git installs using npm 2 may fail in postinstall. If you are consuming Victory via git installs please use npm >=3.0.0
IMPORTANT
This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!
[React]: https://facebook.github.io/react/
[prop-types]: https://github.com/reactjs/prop-types
[trav_img]: https://api.travis-ci.org/FormidableLabs/victory-chart.svg
[trav_site]: https://travis-ci.org/FormidableLabs/victory-chart